<template>
  <div style="width:90%" class="div">
    <el-tabs v-model="activeName" type="card" >
      <el-tab-pane  label="合同信息" name="first" :disabled="disabledContract">
        <!-- 房产信息           -->
        <el-form :inline="true">
          <i class="line"></i>
          <el-form-item><span class="fc">房产信息</span></el-form-item>
          <el-form-item><el-button type="warning" @click="selectHouse()">选择房产</el-button></el-form-item>
        </el-form>
        <hr>
        <!--房产信息表单            -->
        <el-form :inline="true" :model="contractForm" :rules="rules" ref="contractForm" class="demo-form-inline">
          <el-form-item label="小区名称" class="xq" prop="premiseName">
            <el-input v-model="contractForm.premiseName" readonly placeholder="小区名称"></el-input>
          </el-form-item>
          <el-form-item label="房产信息" class="fc1">
            <el-input v-model="contractForm.houseInfo" readonly placeholder="房产信息"></el-input>
          </el-form-item>
          <el-form-item label="所有权类型" class="xq" prop="houseType">
            <el-select v-model="contractForm.houseType" placeholder="所有权类型">
              <el-option  value="">请选择</el-option>
              <el-option v-for="(houseType,index) in houseAllTypes" :label="houseType" :key="index" :value="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房产证书编号" class="fczs" prop="houseZsNo">
            <el-input v-model="contractForm.houseZsNo" placeholder="房产证书编号"></el-input>
          </el-form-item>
          <el-form-item label="产权地址" class="xq" prop="cqAddress">
            <el-input v-model="contractForm.cqAddress" placeholder="产权地址"></el-input>
          </el-form-item>
          <!-- 业主信息           -->
          <br>
          <i class="line"></i>
          <span class="fc">业主信息</span>
          <hr>
          <!--业主信息表单            -->
          <el-form-item label="业主姓名" class="xq" prop="ownerName">
            <el-input style="width: 180px;margin-right: 20px" v-model="contractForm.ownerName" placeholder="业主姓名"></el-input>
            <el-checkbox v-model="signWithOwner" @change="handleChecked">是否是签约人</el-checkbox>
          </el-form-item>
          <el-form-item  style="margin-left: 50px" prop="certificateType">
            <el-select style="width: 80px" v-model="contractForm.certificateType" >
              <el-option v-for="(certificateType,index) in certificateTypes" :label="certificateType" :key="index" :value="index" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 10px" label="业主证件号码" class="fc1" prop="ownerIdCard">
            <el-input v-model="contractForm.ownerIdCard" placeholder="业主证件号码"></el-input>
          </el-form-item>
          <el-form-item label="业主手机号" class="xq" prop="ownerMobile">
            <el-input v-model="contractForm.ownerMobile" placeholder="业主手机号"></el-input>
          </el-form-item>
          <el-form-item label="业主联系地址" class="lx" prop="ownerContactAddress">
            <el-input v-model="contractForm.ownerContactAddress" placeholder="业主联系地址"></el-input>
          </el-form-item>
          <el-form-item label="签约人" class="xq" prop="signUserName">
            <el-input v-model="contractForm.signUserName" placeholder="签约人"></el-input>
          </el-form-item>
          <el-form-item style="margin-left: 190px"  >
            <el-select style="width: 80px" v-model="contractForm.certificateType" >
              <el-option  v-for="(certificateType,index) in certificateTypes" :label="certificateType" :key="index" :value="index" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 10px" label="签约人证件号" class="zj" prop="signUserIdCard">
            <el-input v-model="contractForm.signUserIdCard" placeholder="签约人证件号"></el-input>
          </el-form-item>
          <el-form-item label="签约人手机号" class="xq" prop="signUserMobile">
            <el-input v-model="contractForm.signUserMobile" placeholder="签约人手机号"></el-input>
          </el-form-item>
          <el-form-item label="紧急联系电话" class="dh">
            <el-input v-model="contractForm.signUserEmergencyPhone" placeholder="紧急联系电话"></el-input>
          </el-form-item>
          <el-form-item label="账户类型" class="xq">
            <el-select v-model="optio" placeholder="账户类型">
              <el-option label="请选择" value="0"></el-option>
              <el-option label="对公账户" value="1" ></el-option>
              <el-option label="对私账户"value="2"  ></el-option>
            </el-select>
          </el-form-item>
          <br>
          <el-form-item label="开户省份" class="xq" >
            <el-select v-model="contractForm.bankAccountProvince" placeholder="开户省份">
              <el-option label="请选择" value="0"></el-option>
              <el-option v-for="region in regions" :label="region.regionName" :value="region.regionId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="银行名称" class="fc1">
            <el-select v-model="contractForm.bankName" placeholder="银行名称">
              <el-option label="请选择" value=" "></el-option>
              <el-option v-for="bank in  banks" :label="bank.bankName" :value="bank.bankName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账户名称" class="xq">
            <el-input v-model="contractForm.accountName" placeholder="账户名称"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号" class="card">
            <el-input v-model="contractForm.bankCardNumber" placeholder="银行卡号"></el-input>
          </el-form-item>
          <el-form-item  v-show="optio==1" label="开户支行" class="xq">
            <el-input v-model="contractForm.openingBank" placeholder="开户支行"></el-input>
          </el-form-item>
          <el-form-item v-show="optio==1" label="联行行号" class="fc1">
            <el-input v-model="contractForm.bankBranchCodeLh" placeholder="联行行号"></el-input>
          </el-form-item>
          <!--租约信息-->
          <br>
          <i class="line"></i>
          <span class="fc">租约信息</span>
          <hr>
          <!--租约信息表单         -->
          <el-form-item label="租约期限" class="xq" prop="time1">
            <el-date-picker
              v-model="time1"
              type="date"
              placeholder="选择日期"
              @change="handleTime1" style="width: 150px"  />-
            <el-date-picker
              v-model="time2"
              type="date"
              placeholder="选择日期"
              @change="handleTime2" style="width: 150px" />
            <el-button @click="one()" style="margin-left: 40px" class="c_monthAll" >一年</el-button>
            <el-button @click="two()" class="c_monthAll" >二年</el-button>
            <el-button @click="three()" class="c_monthAll" >三年</el-button>
            <el-button @click="four()" class="c_monthAll" >四年</el-button>
            <el-button @click="five()" class="c_monthAll" >五年</el-button>
          </el-form-item >
          <el-form-item label="租金" class="xq" prop="monthRent">
            <el-input v-model="contractForm.monthRent" placeholder="租金"></el-input>
          </el-form-item>
          <el-form-item label="房产押金" class="lx" prop="depositMoney">
            <el-input v-model="contractForm.depositMoney" placeholder="房产押金"></el-input>
          </el-form-item>
          <el-form-item label="支付方式" class="xq" prop="depositType">
            押：<el-select v-model="contractForm.depositType" placeholder="请选择" style="width: 100px">
            <el-option label="请选择" value="-1"></el-option>
            <el-option :label="1" :value="1"></el-option>
            <el-option :label="2" :value="2"></el-option>
            <el-option :label="3" :value="3"></el-option>
            <el-option :label="4" :value="4"></el-option>
            <el-option :label="5" :value="5"></el-option>
          </el-select>
            付：<el-select v-model="contractForm.paymentType"  prop="paymentType" placeholder="请选择" style="width: 100px">
            <el-option label="请选择" value="-1"></el-option>
            <el-option v-for="(paymentPay,index) in paymentPays" :label="paymentPay" :key="index" :value="index"></el-option>
          </el-select>
          </el-form-item>
          <br>
          <el-form-item label="备注" class="xq">
            <el-input type="textarea" v-model="contractForm.remark" style="width: 337px;"></el-input>
          </el-form-item>
        </el-form>
        <el-button class="qx">取 消</el-button>
        <el-button type="warning" class="xyb" @click="goNext(0,'contractForm')">下一步</el-button>
      </el-tab-pane>
      <!--合同信息结束-->
      <!--附件开始-->
      <el-tab-pane label="附件" name="second" :disabled="disabledUpload" >
        <div style="width:90%" class="div">
          <i class="line"></i>
          <span class="fc">房产证图片</span>
          <hr>
          <el-upload
            action=""
            class="upload-demo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            list-type="picture"
            multiple
            :auto-upload="false"
            :limit="3"
            :file-list="houseDocumentPhotos_uploads"
            :on-change="handleHouseDocumentSuccess">
            <img v-for="houseDocumentPhotos_upload in houseDocumentPhotos_uploads" :src="houseDocumentPhotos_upload" class="avatar">
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <el-button size="small" @click="ossUploadDocumentFile">点击上传</el-button>
          <hr>
          <i class="line"></i>
          <span class="fc">收房合同</span>
          <hr>
          <el-upload
            action=""
            class="upload-demo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            list-type="picture"
            multiple
            :auto-upload="false"
            :limit="3"
            :file-list="contractPhotos_uploads"
            :on-change="handleContractSuccess">
            <img v-for="contractPhotos_upload in contractPhotos_uploads" :src="contractPhotos_upload" class="avatar">
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <el-button size="small" @click="ossUploadContractFile">点击上传</el-button>
          <hr>
          <i class="line"></i>
          <span class="fc">业主身份证明</span>
          <hr>
          <el-upload
            action=""
            class="upload-demo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            list-type="picture"
            multiple
            :auto-upload="false"
            :limit="3"
            :file-list="cardPhotos_uploads"
            :on-change="handleCardSuccess">
            <img v-for="cardPhotos_upload in cardPhotos_uploads" :src="cardPhotos_upload" class="avatar">
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <el-button size="small" @click="ossUploadCardFile">点击上传</el-button>
          <hr>
          <i class="line"></i>
          <span class="fc">代理人身份证明</span>
          <hr>
          <el-upload
            action=""
            class="upload-demo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            list-type="picture"
            multiple
            :auto-upload="false"
            :limit="3"
            :file-list="agentCardPhotos_uploads"
            :on-change="handleAgentCardSuccess">
            <img v-for="agentCardPhotos_upload in agentCardPhotos_uploads" :src="agentCardPhotos_upload" class="avatar">
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <el-button size="small" @click="ossUploadAgentCardFile">点击上传</el-button>
          <hr>
          <i class="line"></i>
          <span class="fc">银行卡信息</span>
          <hr>
          <el-upload
            action=""
            class="upload-demo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            list-type="picture"
            multiple
            :auto-upload="false"
            :limit="3"
            :file-list="bankCardInformationPhotos_uploads"
            :on-change="handleBankCardSuccess">
            <img v-for="bankCardInformationPhotos_upload in bankCardInformationPhotos_uploads" :src="bankCardInformationPhotos_upload" class="avatar">
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <el-button size="small" @click="ossUploadBankCardFile">点击上传</el-button>
          <hr>
          <i class="line"></i>
          <span class="fc">委托书</span>
          <hr>
          <el-upload
            action=""
            class="upload-demo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            list-type="picture"
            multiple
            :auto-upload="false"
            :limit="3"
            :file-list="attorneyPhotos_uploads"
            :on-change="handleAttorneySuccess">
            <img v-for="attorneyPhotos_upload in attorneyPhotos_uploads" :src="attorneyPhotos_upload" class="avatar">
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <el-button size="small" @click="ossUploadAttorneyFile">点击上传</el-button>

          <hr>
          <i class="line"></i>
          <span class="fc">物业交割单</span>
          <hr>
          <el-upload
            action=""
            class="upload-demo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            list-type="picture"
            multiple
            :auto-upload="false"
            :limit="3"
            :file-list="propertyDeliverys_uploads"
            :on-change="handlePropertyDeliverysSuccess">
            <img v-for="propertyDeliverys_upload in propertyDeliverys_uploads" :src="propertyDeliverys_upload" class="avatar">
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <el-button size="small" @click="ossUploadPropertyDeliverysFile">点击上传</el-button>
          <hr>
          <i class="line"></i>
          <span class="fc">其他</span>
          <hr>
          <el-upload
            action=""
            class="upload-demo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            list-type="picture"
            multiple
            :auto-upload="false"
            :limit="3"
            :file-list="otherPhotos_uploads"
            :on-change="handleOtherSuccess">
            <img v-for="otherPhotos_upload in otherPhotos_uploads" :src="otherPhotos_upload" class="avatar">
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
          <el-button size="small" @click="ossUploadOtherFile">点击上传</el-button>
          <hr>
          <el-col>
            <el-button style="margin-right: 80px" >取 消</el-button>
            <el-button type="warning" style="margin-right: 80px" @click="goPrevent(0)">上一步</el-button>
            <el-button type="warning" style="margin-right: 10px" @click="goNext(1,'contractForm')">下一步</el-button>
          </el-col>
        </div>
      </el-tab-pane>
      <!--附件结束-->
      <!--付款单开始-->
      <el-tab-pane label="付款单" name="third"  :disabled="disabledFuKuan">
        <el-table
          :data="payments"
          stripe
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55"/>
          <el-table-column  prop="itemType" label="序号" width="180" ></el-table-column>
          <el-table-column prop="payableDate" label="应付日期" width="180" >
            <template slot-scope="scope">
                  <span  v-if="scope.row.showItem">
                    <el-date-picker
                      v-model="scope.row.payableDate"
                      type="date"
                      placeholder="选择日期"
                      @change="handleTime1" style="width: 150px" value-format="yyyy-MM-dd HH:mm:ss" />
                  </span>
              <span v-else>
                   {{scope.row.payableDate}}
                </span>
            </template>
          </el-table-column>
          <el-table-column prop="paymentAmount" label="金额" width="180" >
            <template slot-scope="scope">
                  <span  v-if="scope.row.showItem">
                    <el-input  v-model="scope.row.paymentAmount"></el-input>
                  </span>
              <span v-else>{{ scope.row.paymentAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="tax" label="税费" width="180" style="width: 80px">
            <template slot-scope="scope">
                  <span  v-if="scope.row.showItem">
                    <el-input  v-model="scope.row.tax"></el-input>
                  </span>
              <span v-else>{{ scope.row.tax }}</span>
            </template>
          </el-table-column>
          <el-table-column label="付款状态" prop="payState" width="180">
            <template slot-scope="scope">
                <span  v-if="scope.row.showItem">
                     <el-radio-group v-model="scope.row.payState">
                      <el-radio :label="2">已付</el-radio>
                      <el-radio :label="1">未付</el-radio>
                    </el-radio-group>
                  </span>
              <span v-else> {{scope.row.payState==1?'未收款':scope.row.payState==2?'已收款':'已中止'}}</span>
            </template>
          </el-table-column>
          <el-table-column   label="房产租金周期" width="180">
            <template slot-scope="scope">
                  <span  v-if="scope.row.showItem" >
                    <el-date-picker
                      v-model="scope.row.paymentDaysBegin"
                      type="date"
                      placeholder="选择日期"
                      @change="handleTime1" style="width: 150px"  />
                     <el-date-picker
                       v-model="scope.row.paymentDaysEnd"
                       type="date"
                       placeholder="选择日期"
                       @change="handleTime2" style="width: 150px" />
                  </span>
              <span v-else>{{scope.row.paymentDaysBegin}} 至 {{ scope.row.paymentDaysEnd }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button v-if="!scope.row.showItem" type="text" @click="handleUpdate(scope.row,scope.$index)">修改</el-button>
              <div v-else>
                <el-button type="text" @click="handleUpdateEsc(scope.row,scope.$index)">取消修改</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="warning" class="xyb" @click="goPrevent(1)">上一步</el-button>
        <el-button type="warning" class="xyb" @click="save()">保存</el-button>
      </el-tab-pane>
      <!--付款单结束-->
    </el-tabs>

    <el-dialog
      title="房产"
      :visible.sync="dialogVisible"
      width="50%">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="小区名称">
          <el-input style="width: 100px" v-model="searchForm.premiseName" placeholder="小区名称"></el-input>
        </el-form-item>
        <el-form-item label="租房类型">
          <el-select style="width: 100px" v-model="searchForm.leaseType" placeholder="租房类型">
            <el-option label="请选择" value="-1"></el-option>
            <el-option v-for="tenantManage in  tenantManages" :label="tenantManage" :value="tenantManage.index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column prop="premiseName" label="房产信息" ></el-table-column>
        <el-table-column prop="roomName" label="居室" ></el-table-column>
        <el-table-column prop="leaseType" label="租房类型" ></el-table-column>
        <el-table-column  label="操作" >
          <template slot-scope="scope">
            <el-button @click="handleSelect(scope.row)" type="text">选中</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="current"
        :page-sizes="[10,20,30]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rules: {
        monthRent: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        depositMoney: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        depositType: [
          { required: true, message: '请输入', trigger: 'change' },
        ],
        paymentType: [
          { required: true, message: '请输入', trigger: 'change' },
        ],
        certificateType: [
          { required: true, message: '请输入', trigger: 'change' },
        ],
        cqAddress: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        houseZsNo: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        houseType: [
          { required: true, message: '请输入', trigger: 'change' },
        ],
        signUserIdCard: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        ownerContactAddress: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        ownerIdCard: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        signUserMobile: [
          { required: true, message: '请输入', trigger: 'blur' },
        ]
      },
      signWithOwner:'',
      payments:[],
      houseDocumentPhotos_uploads:[],
      contractPhotos_uploads:[],
      cardPhotos_uploads:[],
      agentCardPhotos_uploads:[],
      bankCardInformationPhotos_uploads:[],
      attorneyPhotos_uploads:[],
      propertyDeliverys_uploads:[],
      otherPhotos_uploads:[],
      disabledContract:true,
      disabledUpload:true,
      disabledFuKuan:true,
      first:false,
      time1:null,
      time2:null,
      tableData:[],
      searchForm:{},
      dialogVisible:false,
      activeName: 'first',
      contractForm:{},
      optio:'',
      houseAllTypes:[],
      regions:[],
      banks:[],
      certificateTypes:[],
      rooms:[],
      current:1,
      size:10,
      total:'',
      leaseTypes:[],
      tenantManages:[],
      paymentPays:[],
    };
  },
  created() {
    this.initHouseAllTypeEnum();
    this.initRegion();
    this.initBank();
    this.initCertificateTypes();
    this.initRoom();
    this.initLeaseType();
    this.initTenantManageEnum();
    this.initPaymentPayEnum();
  },
  methods: {
    handleUpdateEsc(row,index){
      this.$set(this.payments[index], 'showItem', false)
      this.contractForm.payableDate = this.payments[index].payableDate;
      this.contractForm.paymentAmount = this.payments[index].paymentAmount;
      this.contractForm.tax = this.payments[index].tax;
      this.contractForm.payState = this.payments[index].payState;
      this.contractForm.paymentDaysBegin = this.payments[index].paymentDaysBegin;
      this.contractForm.paymentDaysEnd = this.payments[index].paymentDaysEnd;
    },
    handleUpdate(row,index){
      // showItem为ture展示输入框
      this.$set(this.payments[index], 'showItem', true)

    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.size = val
      this.initRoom();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.current = val
      this.initRoom();
    },
    save(){
      this.contractForm.startDate = this.time1;
      this.contractForm.endDate = this.time2;
      this.contractForm.payMentltems =this.payments;
      var username = localStorage.getItem("username")
      this.contractForm.username = username;
      this.axios({
        method: 'post',
        url: 'http://localhost:9999/house-foreclosure/tSfContract/saveSfContract',
        data: this.contractForm
      }).then((res) => {
        if (res.data) {
          alert(res.data.msg)
        }
      })
    },
    handleChecked(val){
      if (val==true){
        this.contractForm.signWithOwner = 0;
        this.contractForm.signUserName = this.contractForm.ownerName;
        this.contractForm.signUserMobile = this.contractForm.ownerMobile;
        this.contractForm.signUserIdCard = this.contractForm.ownerIdCard;
      }
      if (val==false){
        this.contractForm.signWithOwner = 1;
        this.contractForm.signUserName='';
        this.contractForm.signUserMobile='';
        this.contractForm.signUserIdCard='';
      }
    },
    handleSelect(row){
      this.contractForm.premiseName = row.premiseName;
      this.contractForm.houseInfo = row.roomName;
      this.contractForm.houseId= row.houseId;
      this.dialogVisible=false
    },
    search(){
      this.current = 1;
      this.initRoom();
    },
    selectHouse(){
      this.dialogVisible=true
      this.initRoom();
    },
    initTenantManageEnum(){
      this.axios({
        method:'post',
        url:'http://localhost:9999/house-foreclosure/tSfContract/tenantManageEnum',
      }).then((res)=>{
        if (res.data){
          this.tenantManages = res.data
        }
      })
    },
    initPaymentPayEnum(){
      this.axios({
        method:'post',
        url:'http://localhost:9999/house-foreclosure/tSfContract/paymentPayEnum',
      }).then((res)=>{
        if (res.data){
          this.paymentPays = res.data
        }
      })
    },
    initLeaseType(){
      this.axios({
        method:'post',
        url:'http://localhost:9999/house-foreclosure/tSfContract/leaseType',
      }).then((res)=>{
        if (res.data){
          this.leaseTypes = res.data
        }
      })
    },
    initHouseAllTypeEnum(){
      this.axios({
        method:'post',
        url:'http://localhost:9999/house-foreclosure/tSfContract/houseAllTypeEnum',
      }).then((res)=>{
        if (res.data){
          this.houseAllTypes = res.data
        }
      })
    },
    initCertificateTypes(){
      this.axios({
        method:'post',
        url:'http://localhost:9999/house-foreclosure/tSfContract/certificateType',
      }).then((res)=>{
        if (res.data){
          this.certificateTypes = res.data
        }
      })
    },
    initRegion() {
      this.axios({
        method: 'post',
        url: 'http://localhost:9999/system-management/sysRegion/list',
        params: {
          parentId:1
        }
      }).then((res) => {
        if (res.data) {
          this.regions = res.data.obj
        }
      })
    },
    initBank() {
      this.axios({
        method: 'post',
        url: 'http://localhost:9999/house-foreclosure/tMBank/banks',
        params: {
        }
      }).then((res) => {
        if (res.data) {
          this.banks = res.data.obj
        }
      })
    },
    handleTime1(val){
      if (val){
        this.time1 = val
        this.contractForm.startTime = val;
      }
    },
    handleTime2(val){
      if (val){
        this.time2 = val
        this.contractForm.endTime = val;
      }
    },
    one(){
      if (this.time1 == null || this.time1==''){
        this.time1 = new Date()
        this.time2 = new Date()
        this.time2.setFullYear(Number(this.time2.getFullYear()+1))
      }else if (Number(this.time1.getFullYear())>Number(new Date().getFullYear())){
        this.time2 = this.time1;
        this.time2.setFullYear(Number(this.time2.getFullYear()+1))
        this.contractForm.startTime = this.time1;
        this.time1=null;
      }
    },
    two(){
      if (this.time1 == null || this.time1==''){
        this.time1 = new Date()
        this.time2 = new Date()
        this.time2.setFullYear(Number(this.time2.getFullYear()+2))
      }else {
        this.time2 = this.time1;
        this.time2.setFullYear(Number(this.time2.getFullYear()+2))
      }
    },
    three(){
      if (this.time1 == null || this.time1==''){
        this.time1 = new Date()
        this.time2 = new Date()
        this.time2.setFullYear(Number(this.time2.getFullYear()+3))
      }else {
        this.time2 = this.time1;
        this.time2.setFullYear(Number(this.time2.getFullYear()+3))
      }
    },
    four(){
      if (this.time1 == null || this.time1==''){
        this.time1 = new Date()
        this.time2 = new Date()
        this.time2.setFullYear(Number(this.time2.getFullYear()+4))
      }else {
        this.time2 = this.time1;
        this.time2.setFullYear(Number(this.time2.getFullYear()+4))
      }
    },
    five(){

      if (this.time1 == null || this.time1==''){
        this.time1 = new Date()
        this.time2 = new Date()
        this.time2.setFullYear(Number(this.time2.getFullYear()+5))
      }else {
        this.time2 = this.time1;
        this.time2.setFullYear(Number(this.time2.getFullYear()+5))
      }
    },
    //下一步
    goNext(val,formName){

      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (val==0){
            this.activeName="second";
            this.disabledContract = true;
            this.disabledUpload = false
            this.disabledFuKuan = true;
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });

      if (val==1){
        this.activeName="third";
        this.disabledContract = true;
        this.disabledUpload = true;
        this.disabledFuKuan = false;
        this.initPayMent();
      }



    },
    goPrevent(val){
      if (val==0){
        this.activeName="first";
        this.disabledContract = false;
        this.disabledUpload = true;
        this.disabledFuKuan = true;
      }
      if (val==1){
        this.activeName="second";
        this.disabledContract = true;
        this.disabledUpload = false;
        this.disabledFuKuan = true;
      }
    },
    initRoom(){
      this.axios({
        method: 'post',
        url: 'http://localhost:9999/house-foreclosure/tbHouseInfo/searchHouseInfoList',
        params: {
          premiseName:this.searchForm.premiseName,
          leaseType:this.searchForm.leaseType,
          pageNum:this.current,
          pageSize:this.size
        }
      }).then((res) => {
        if (res) {
          this.tableData = res.data.obj.list
          this.total = res.data.obj.total
        }
      })
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    ossUploadDocumentFile() {
      let formData = new FormData();
      console.log(JSON.stringify(this.houseDocumentPhotos_uploads)+'_____________')
      this.houseDocumentPhotos_uploads.forEach(function (file) {
        if (file.raw) {
          formData.append("files",file.raw,file.name)
        }
      })
      let config = {"Content-Type":"multipart/form-data"}
      this.axios({
        method:'post',
        url:'http://localhost:9999/house-resource/oss/upload',
        data:formData,
        config:config
      }).then((res)=>{
        if (res.data) {
          console.log(JSON.stringify(res.data)+"++++++++++++++++")
          this.houseDocumentPhotos_uploads=res.data
          this.contractForm.houseDocumentPhotos=res.data
          // this.contractForm.roomInfos[0].roomInfoImages = res.data
        }
      })
    },
    ossUploadContractFile(){
      let formData = new FormData();
      this.contractPhotos_uploads.forEach(function (file) {
        if (file.raw) {
          formData.append("files",file.raw,file.name)
        }
      })
      let config = {"Content-Type":"multipart/form-data"}
      this.axios({
        method:'post',
        url:'http://localhost:9999/house-resource/oss/upload',
        data:formData,
        config:config
      }).then((res)=>{
        if (res.data) {
          this.contractPhotos_uploads=res.data
          this.contractForm.contractPhotos=res.data
        }
      })
    },
    ossUploadCardFile(){
      let formData = new FormData();
      this.cardPhotos_uploads.forEach(function (file) {
        if (file.raw) {
          formData.append("files",file.raw,file.name)
        }
      })
      let config = {"Content-Type":"multipart/form-data"}
      this.axios({
        method:'post',
        url:'http://localhost:9999/house-resource/oss/upload',
        data:formData,
        config:config
      }).then((res)=>{
        if (res.data) {
          this.cardPhotos_uploads=res.data
          this.contractForm.cardPhotos=res.data
          // this.contractForm.roomInfoImages=res.data
          // this.contractForm.roomInfos[0].roomInfoImages = res.data
        }
      })
    },
    ossUploadAgentCardFile(){
      let formData = new FormData();
      this.agentCardPhotos_uploads.forEach(function (file) {
        if (file.raw) {
          formData.append("files",file.raw,file.name)
        }
      })
      let config = {"Content-Type":"multipart/form-data"}
      this.axios({
        method:'post',
        url:'http://localhost:9999/house-resource/oss/upload',
        data:formData,
        config:config
      }).then((res)=>{
        if (res.data) {
          this.agentCardPhotos_uploads=res.data
          this.contractForm.agentCardPhotos=res.data
          // this.contractForm.roomInfoImages=res.data
          // this.contractForm.roomInfos[0].roomInfoImages = res.data
        }
      })
    },
    ossUploadBankCardFile(){
      let formData = new FormData();
      this.bankCardInformationPhotos_uploads.forEach(function (file) {
        if (file.raw) {
          formData.append("files",file.raw,file.name)
        }
      })
      let config = {"Content-Type":"multipart/form-data"}
      this.axios({
        method:'post',
        url:'http://localhost:9999/house-resource/oss/upload',
        data:formData,
        config:config
      }).then((res)=>{
        if (res.data) {
          this.bankCardInformationPhotos_uploads=res.data
          this.contractForm.bankCardInformationPhotos=res.data
          // this.contractForm.roomInfoImages=res.data
          // this.contractForm.roomInfos[0].roomInfoImages = res.data
        }
      })
    },
    ossUploadAttorneyFile(){
      let formData = new FormData();
      this.attorneyPhotos_uploads.forEach(function (file) {
        if (file.raw) {
          formData.append("files",file.raw,file.name)
        }
      })
      let config = {"Content-Type":"multipart/form-data"}
      this.axios({
        method:'post',
        url:'http://localhost:9999/house-resource/oss/upload',
        data:formData,
        config:config
      }).then((res)=>{
        if (res.data) {
          this.attorneyPhotos_uploads=res.data
          this.contractForm.attorneyPhotos=res.data
          // this.contractForm.roomInfoImages=res.data
          // this.contractForm.roomInfos[0].roomInfoImages = res.data
        }
      })
    },
    ossUploadPropertyDeliverysFile(){
      let formData = new FormData();
      this.propertyDeliverys_uploads.forEach(function (file) {
        if (file.raw) {
          formData.append("files",file.raw,file.name)
        }
      })
      let config = {"Content-Type":"multipart/form-data"}
      this.axios({
        method:'post',
        url:'http://localhost:9999/house-resource/oss/upload',
        data:formData,
        config:config
      }).then((res)=>{
        if (res.data) {
          this.propertyDeliverys_uploads=res.data
          this.contractForm.propertyDeliverys=res.data
          // this.contractForm.roomInfoImages=res.data
          // this.contractForm.roomInfos[0].roomInfoImages = res.data
        }
      })
    },
    ossUploadOtherFile(){
      let formData = new FormData();
      console.log(JSON.stringify(this.otherPhotos_uploads)+'+++++++++++++++++++++++++')
      this.otherPhotos_uploads.forEach(function (file) {
        if (file.raw) {
          formData.append("files",file.raw,file.name)
        }
      })
      let config = {"Content-Type":"multipart/form-data"}
      this.axios({
        method:'post',
        url:'http://localhost:9999/house-resource/oss/upload',
        data:formData,
        config:config
      }).then((res)=>{
        if (res.data) {
          this.otherPhotos_uploads=res.data
          this.contractForm.otherPhotos=res.data
          // this.contractForm.roomInfoImages=res.data
          // this.contractForm.roomInfos[0].roomInfoImages = res.data
        }
      })
    },
    handleHouseDocumentSuccess(file,files){
      this.houseDocumentPhotos_uploads = files
    },
    handleContractSuccess(file,files){
      this.contractPhotos_uploads = files
    },
    handleCardSuccess(file,files){
      this.cardPhotos_uploads = files
    },
    handleAgentCardSuccess(file,files){
      this.agentCardPhotos_uploads = files
    },
    handleBankCardSuccess(file,files){
      this.bankCardInformationPhotos_uploads = files
    },
    handleAttorneySuccess(file,files){
      this.attorneyPhotos_uploads = files
    },
    handlePropertyDeliverysSuccess(file,files){
      this.propertyDeliverys_uploads = files
    },
    handleOtherSuccess(file,files){
      this.otherPhotos_uploads = files
    },
    initPayMent() {
      this.contractForm.startDate = this.time1
      this.contractForm.endDate = this.time2
      this.axios({
        method:'post',
        url:'http://localhost:9999/house-foreclosure/tSfContract/generatePayMentPlan',
        data: this.contractForm
      }).then((res)=>{
        if (res.data){
          this.payments = res.data.payMentPlanList;
          console.log(this.payments)
        }
      })
    }
  }

}
</script>

<style scoped>
.div{
  border:1px solid #bfcbd9;
  margin: auto;
}
.fc{
  font-size: 20px;
}
.xq{
  margin-left: 85px;
}
.fc1{
  margin-left: 232px;
}
.card{
  margin-left: 245px;
}
.lx{
  margin-left: 250px;
}
.zj{
  margin-left: 232px;
}
.dh{
  margin-left: 240px;
}
.fczs{
  margin-left: 200px;
}
.qx{
  margin-left: 870px;
  border:1px solid #f9944a;
  color: #f9944a;
}
.xyb{
  float: right;
  margin-right: 10px;
}
.line {
  height: 20px;
  width: 5px;
  border-radius: 10px;
  background: orange;
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
  position: relative;
  top: 4px;
}
.layui-layer-setwin .layui-layer-close2{
  opacity: 0!important;
  right: 6px!important;
  top: -2px!important;
}
.tan{
  width: 400px;
  border: solid 1px #dcdcdc;
  position:absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -200px;
  background: #fff;
  display: none;
}
.tan p:nth-child(1){
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
  margin-top: 10px;
  cursor: pointer;
}
.tan p:nth-child(2){
  width: 400px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 30px;
  font-size: 17px;
}
.tan p:nth-child(3){
  width: 400px;
  text-align: center;
  margin-bottom: 25px;
}
.tan p:nth-child(3) button{
  width: 130px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 3px;
  outline: none;
  border: none;
}
.tan p:nth-child(3) button:nth-child(1){
  border: solid 1px #ffa800;
  color: #ffa800;
  background: #fff;
  margin-right: 10px;
}
.tan p:nth-child(3) button:nth-child(2){
  background: #ffa800;
  color: #fff;
  margin-left: 10px;
}
.searchable-select-dropdown{
  z-index:9999
}
</style>
